<style scoped lang="less">
</style>
<template>
	<div class="danger-comp">
		<el-form :inline="true" class="filter-blk mt-20">
			<el-form-item label="起始日期">
				<el-date-picker
					v-model="dateRange"
			      	type="daterange"
			      	range-separator="至"
			      	start-placeholder="开始日期"
			      	end-placeholder="结束日期"
			      	value-format="yyyy-MM-dd"
			      	:picker-options="pickerOptions">
			    </el-date-picker>
			</el-form-item>
			<el-form-item label="整改状态">
				<el-select style="width:140px;" v-model="filterForm.state" placeholder="请选择" clearable>
			      	<el-option :label="item.name" :value="item.id" v-for="(item, key) in statusList" :key="key"></el-option>
			    </el-select>
			</el-form-item>
			<el-form-item label="隐患等级">
				<el-select style="width:140px;" v-model="filterForm.grade" placeholder="请选择" clearable>
			      	<el-option :label="item.name" :value="item.id" v-for="(item, key) in gradeList" :key="key"></el-option>
			    </el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchAction"><i class="iconfont icon-search"></i> 查询</el-button>
			</el-form-item>
		</el-form>
		<el-table
  			class="mt-20"
			:data="dataList" 
			style="width: 100%"
			v-loading="loading">
		    <el-table-column prop="des" label="隐患描述"></el-table-column>
		    <el-table-column prop="findtime" label="发现时间" width="200"></el-table-column>
		    <el-table-column prop="gradeName" label="隐患等级" width="200"></el-table-column>
		    <el-table-column prop="stateName" label="状态" width="200"></el-table-column>
		    <el-table-column label="操作" width="120">
		    	<template slot-scope="scope">
			    	<el-button type="primary" @click="detailAction(scope.row)">详情</el-button>
			    </template>
		    </el-table-column>
		</el-table>
		<el-pagination
			v-if="total>0"
			class="text-right mt-20 mr-20"
	      	@current-change="handleCurrentChange"
	      	:current-page="currentPage"
	      	:page-size="pageSize"
	      	layout="prev, pager, next, total, jumper"
	      	:total="total">
	    </el-pagination>

		<!-- 隐患详情 start -->
		<el-dialog v-if="detailModalVisible" title="隐患详情" :visible.sync="detailModalVisible" width="800px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close append-to-body @close="closeDetailModal">
			<Detail 
				ref="detail"
				:activeData="activeData"
	    		@cancel="detailModalVisible=false"
	    	>
	    	</Detail>
		</el-dialog>
		<!-- 隐患详情 end -->
	</div>
	<!-- render-content="renderContent" -->
</template>
<script>
import Detail from '@/components/census/DangerDetail.vue'
export default {
	name: 'TraceDanger',
	props: {
		type: {
			type: String,
			default: 'trace'
		},
		id: { //单位ID
			type: String,
			default: ''
		},
	},
	components: {
		Detail
	},
	watch: {
		dateRange (val) {
			if(typeof(val[0])=='object'){
				this.filterForm.findtimeStart = [val[0].getFullYear(),val[0].getMonth()+1,val[0].getDate()].join('-')
				this.filterForm.findtimeEnd = [val[1].getFullYear(),val[1].getMonth()+1,val[1].getDate()].join('-')
			}else{
				this.filterForm.findtimeStart = val[0]
				this.filterForm.findtimeEnd = val[1]
			}
		}
	},
	data () {
		return {
			dateRange: '',
			pickerOptions: {
	          	shortcuts: [{
		            text: '最近一周',
		            onClick(picker) {
		              	const end = new Date();
		              	const start = new Date();
		              	start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
		              	picker.$emit('pick', [start, end]);
		            }
	          	}, {
		            text: '最近一个月',
		            onClick(picker) {
		              	const end = new Date();
		              	const start = new Date();
		              	start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		              	picker.$emit('pick', [start, end]);
		            }
	          	}, {
		            text: '最近三个月',
		            onClick(picker) {
		              	const end = new Date();
		              	const start = new Date();
		              	start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
		              	picker.$emit('pick', [start, end]);
		            }
	          	}]
	        },
			filterForm: {},
			activeType: '',
			statusList:[{
				id: '1',
				name: '未整改'
			},{
				id: '2',
				name: '整改中'
			},{
				id: '3',
				name: '整改完成'
			}],
			gradeList: [],
			total: 0,
			loading: false,
			currentPage:1,
			pageSize: 10,
			dataList:[],
			activeData: null,
			detailModalVisible: false
		}
	},
	methods: {
		getData (page) {
			// this.dataList = [{},{}]
			// return
			this.loading = true
			let params = Object.assign({
				page: page,
				limit: this.pageSize
			},this.filterForm)
			if(this.id){
				params.businessId = this.id
			}
			this.$get('/check/hiddendanger/hiddendangerListPage', params).then(res => {
				this.loading = false
            	let data = res.data
                this.currentPage = page
                this.total = data.totalSize
                this.dataList = data.Items
            }, (err) =>{
            	this.$message.error(err.msg)
            })
		},
		getDict (groupname,cbk) {
			this.$get('/check/checkaddr/dictList', {
            	groupname: groupname
            }).then(res => {
            	cbk && cbk(res.data)
            }, (err) =>{
            	// 
            })
		},
		searchAction () {
			this.getData(1)
		},
		handleCurrentChange (page) {
			this.getData(page)
		},
		detailAction (item) {
			this.activeData = item
			this.detailModalVisible = true
		},
		closeDetailModal () {
			this.activeData = null
		}
	},
	created () {
		this.getDict('隐患',data=>{
			this.gradeList = data
		})
		let end = new Date();
		let start = new Date();
        this.dateRange = [start, end]
		this.$nextTick(()=>{
			this.getData(1)
		});
	},
}
</script>